import React from 'react'
import './index.css'
import dogAdvice from '../../image/dog_advice.png'
import PetTrait from '../../components/PetTrait'
import { NavBar } from 'antd-mobile'
import { back } from '../../api/public'
//养狗建议
export default function DogAdvice() {
  const dogTypes = [
    {id:14,name:'中华田园犬',advantage:'体质好，容易饲养，不容易生病，性格温顺。',defect:'血统多数不纯，长相不招人喜欢。'},
    {id:1,name:'贵宾犬',advantage:'聪明好训练，性格活泼，体味小，基本不掉毛。',defect:'爱叫，需要定期剪毛，容易有骨骼问题。'},
    {id:2,name:'柯基',advantage:'性格温和，外形可爱，精力旺盛，容易训练。',defect:'玻璃肠胃，掉毛严重，容易患有脊椎疾病。'},
    {id:3,name:'巴哥',advantage:'友好，好奇心旺盛，爱干净，性格平和。',defect:'特别粘人贪吃，需要控制好食量。'},
    {id:4,name:'法斗',advantage:'蠢萌外表，活泼不爱叫，短毛好打理。',defect:'喜欢打呼放屁，倔强，夏天怕热冬天怕冷，眼睛和面部褶子需要定期检查。'},
    {id:5,name:'约克夏',advantage:'超级软萌，体型小，食量小，勇敢，警惕性强。',defect:'妒忌心强，奶凶，需要毛发护理。'},
    {id:6,name:'博美',advantage:'顽皮可爱，食量小，友善爱撒娇。',defect:'有的很凶，需要毛发护理。'},
    {id:7,name:'马尔济斯',advantage:'温柔乖巧，反应灵敏，运动量少，不掉毛。',defect:'容易有泪痕，需要毛发护理。'},
    {id:8,name:'柴犬',advantage:'性格温顺，对主人忠诚，不乱叫。',defect:'性格固执，一根筋，掉毛。'},
    {id:9,name:'萨摩耶',advantage:'微笑天使，不挑食，待人友善',defect:'掉毛，洗澡麻烦。'},
    {id:10,name:'哈士奇',advantage:'帅气，给生活添加乐趣，体味小，爱干净。',defect:'服从性低，拆家小能手。'},
    {id:11,name:'边牧',advantage:'优点，聪明机智，爱玩自来熟。',defect:'太过聪明，驯服难，肠胃敏感。'},
    {id:12,name:'金毛',advantage:'温顺听话，非常聪明，喜欢小朋友，对人友善。',defect:'体味重，肠胃脆弱。'},
    {id:13,name:'阿拉斯加',advantage:'体型大有安全感，不乱叫。',defect:'吃得多，肠胃脆弱，精力旺盛。'},

  
  ]
  return (
    <div className='dog_container'>
        <NavBar onBack={back}>养狗建议</NavBar>
        <div className="dog_header">
          <img src={dogAdvice} width='100%' alt="" />
        </div>
        <div className="dog_main">
            <div className="content">
                <p>大家都喜欢什么狗狗呀？像我作为一名打工人，就比较喜欢省事的狗狗～</p>
                <p>不同品种都有不同的特点和性格，大家可以根据自己的条件，性格和生活方式来选择适合自己的狗狗～</p>
            </div> 

            <div className="dog-types">
            {
              dogTypes.map((item,index)=>{
                return <PetTrait key={item.id} name={item.name} advantage={item.advantage} defect = {item.defect}></PetTrait>
              })
            }
            </div>
        </div>
    </div>
  )
}
